<title>选择框</title>

<div class="content-header row">
    <div class="content-header-left col-md-8 col-12 mb-2 breadcrumb-new">
        <h3 class="content-header-title mb-0 d-inline-block">选择框</h3>
        <div class="row breadcrumbs-top d-inline-block">
            <div class="breadcrumb-wrapper mr-1">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/dashboard" class="menu-router">首页</a></li>
                    <li class="breadcrumb-item"><a href="javascript:;">组件</a></li>
                    <li class="breadcrumb-item active">选择框</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="content-body">
    <section class="basic-inputs">
        <div class="row match-height">
            <div class="col-xl-12 col-lg-12 col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4 id="cardTitle" class="card-title">Select 选择框</h4>
                    </div>
                    <div class="card-body">
                        <form class="form">
                            <div class="form-body">
                                <div class="btn-toolbar" role="toolbar" aria-label="Programmatic control">
                                    <button type="button" class="js-set-val btn btn-primary btn-xs btn-lighten-1">Set "China"</button>

                                    <button type="button" class="js-toggle btn btn-primary btn-xs btn-lighten-1 ml-1">Toggle</button>
                                    <button type="button" class="js-show btn btn-primary btn-xs btn-lighten-1 ml-1">Show</button>
                                    <button type="button" class="js-hide btn btn-primary btn-xs btn-lighten-1 ml-1">Hide</button>

                                    <button type="button" class="js-get-original-value btn btn-primary btn-xs btn-lighten-1 ml-1">GetOriginalSelectValue</button>

                                    <button type="button" class="js-disabled-set btn btn-primary btn-xs btn-lighten-1 ml-1">Set Disabled</button>
                                    <button type="button" class="js-disabled-remove btn btn-primary btn-xs btn-lighten-1 ml-1">Remove Disabled</button>
                                </div>
                                <div class="form-group mt-1">
                                    <label for="companyName">国家名称</label>
                                    <select id="companyName" name="countries" class="form-control form-select">
                                        <option value="" lucky-icon="ft-activity">请选择国家</option>
                                        <option value="china">中国</option>
                                        <option value="jp" disabled>日本</option>
                                        <option value="US">美国</option>
                                    </select>
                                </div>
                                <div class="form-group mt-1">
                                    <label for="companyName2">国家名称</label>
                                    <select id="companyName2" name="countries2" class="form-control form-select">
                                        <option value="">请选择国家</option>
                                        <optgroup label="Alaskan/Hawaiian Time Zone">
                                            <option value="AK">Alaska</option>
                                            <option value="HI" disabled>Hawaii</option>
                                        </optgroup>
                                            <option value="CA">California</option>
                                            <option value="NV">Nevada</option>
                                            <option value="OR">Oregon</option>
                                            <option value="WA">Washington</option>
                                        </optgroup>
                                        <optgroup label="Mountain Time Zone">
                                            <option value="AZ">Arizona</option>
                                            <option value="CO">Colorado</option>
                                            <option value="ID">Idaho</option>
                                            <option value="MT">Montana</option>
                                            <option value="NE">Nebraska</option>
                                            <option value="NM">New Mexico</option>
                                            <option value="ND">North Dakota</option>
                                            <option value="UT">Utah</option>
                                            <option value="WY">Wyoming</option>
                                        </optgroup>
                                        <optgroup label="Central Time Zone">
                                            <option value="AL">Alabama</option>
                                            <option value="AR">Arkansas</option>
                                            <option value="IL">Illinois</option>
                                            <option value="IA">Iowa</option>
                                            <option value="KS">Kansas</option>
                                            <option value="KY">Kentucky</option>
                                            <option value="LA">Louisiana</option>
                                            <option value="MN">Minnesota</option>
                                            <option value="MS">Mississippi</option>
                                            <option value="MO">Missouri</option>
                                            <option value="OK">Oklahoma</option>
                                            <option value="SD">South Dakota</option>
                                            <option value="TX">Texas</option>
                                            <option value="TN">Tennessee</option>
                                            <option value="WI">Wisconsin</option>
                                        </optgroup>
                                        <optgroup label="Eastern Time Zone">
                                            <option value="CT">Connecticut</option>
                                            <option value="DE">Delaware</option>
                                            <option value="FL">Florida</option>
                                            <option value="GA">Georgia</option>
                                            <option value="IN">Indiana</option>
                                            <option value="ME">Maine</option>
                                            <option value="MD">Maryland</option>
                                            <option value="MA">Massachusetts</option>
                                            <option value="MI">Michigan</option>
                                            <option value="NH">New Hampshire</option>
                                            <option value="NJ">New Jersey</option>
                                            <option value="NY">New York</option>
                                            <option value="NC">North Carolina</option>
                                            <option value="OH">Ohio</option>
                                            <option value="PA">Pennsylvania</option>
                                            <option value="RI">Rhode Island</option>
                                            <option value="SC">South Carolina</option>
                                            <option value="VT">Vermont</option>
                                            <option value="VA">Virginia</option>
                                            <option value="WV">West Virginia</option>
                                        </optgroup>
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<script type="text/javascript">
    lucky.require(['select','modal'],function(){
        var select = lucky.select, modal = lucky.modal;
        var othis = select.render("#companyName", {search:false});
        var othis2 = select.render("#companyName2", {search:true});
//        othis.on("change", function(data){
//            modal.msg(data.value);
//        });
//        othis.on("open", function(data){
//            modal.msg("open");
//        });
//        othis.on("close", function(data){
//            modal.msg("close");
//        });
        $(".js-set-val").on("click",function (e) {
            e.stopPropagation();
            othis2.setVal("WY");
        });
        $(".js-toggle").on("click",function (e) {
            e.stopPropagation();
            othis.toggle();
        });
        $(".js-show").on("click",function (e) {
            e.stopPropagation();
            othis.show();
        });
        $(".js-hide").on("click",function (e) {
            e.stopPropagation();
            othis.hide();
        });
        $(".js-disabled-set").on("click",function (e) {
            e.stopPropagation();
            othis.setDisabled(true);
        });
        $(".js-disabled-remove").on("click",function (e) {
            e.stopPropagation();
            othis.setDisabled(false);
        });

        $(".js-get-original-value").on("click",function (e) {
            e.stopPropagation();
            modal.msg($("#companyName").val());
        });

        //select.render("#companyName2");
    });
</script>